<!--
 * @Author: daidai
 * @Date: 2022-02-20 16:16:42
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-10-25 09:18:22
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\left-center.vue
-->
<template>
    <table class="table">
        <tr>
            <th>排名/车辆</th>
            <th>次数</th>
            <th>运费</th>
        </tr>
        <tr>
            <td>鲁Q34500</td>
            <td>12</td>
            <td>135620</td>
        </tr>
        <tr>
            <td>鲁Q34570</td>
            <td>12</td>
            <td>135620</td>
        </tr>
        <tr>
            <td>鲁Q31240</td>
            <td>12</td>
            <td>135620</td>
        </tr>
        <tr>
            <td>鲁Q345321</td>
            <td>12</td>
            <td>135620</td>
        </tr>
        <!-- <tr>
            <td>鲁Q34123</td>
            <td>12</td>
            <td>135620</td>
        </tr> -->
    </table>
</template>

<script>
export default {
    data() {
        return {};
    },
    created() { },
    mounted() { },
    beforeDestroy() { },
    methods: {},
};
</script>
<style lang="scss" scoped>
.table {
    border: 1px solid rgba(67, 144, 222, 0.8);
    width: calc(100% - 40px);
    height: calc(100% - 20px);
    margin: 5px 20px 15px 20px;

    tr {
        border-top: 1px solid rgba(67, 144, 222, 0.8);
        background: linear-gradient(to top, #000000, #00284e);
    }

    // 改变奇数行的背景色
    tr:nth-child(odd) {
        background: linear-gradient(to top, #051f3a 0%, #011a35 100%);
    }

    th {
        color: rgba(255, 255, 255, 0.3);
        font-size: 13px;
        text-align: center;
        vertical-align: middle;
        background: linear-gradient(to top, #14569a, #022549);
    }

    td {
        font-size: 14px;
        text-align: center;
        vertical-align: middle;
    }

    .actived {
        background: linear-gradient(circle, #000000 0%, #00417e 100%) !important;
        box-shadow: inset 0px 0px 14px 0px #17cbf0;
        color: #07d3ff;
        cursor: pointer;
    }
}
</style>